<template>
	<view>
		<view>
			<view class="mb10" v-if="communityList.length > 0">
				<article-item v-for="(item, index) in communityList" :key="index" :obj="item" @handleLike="handleLike" />
				<view v-if="loadAll" class="reach-bottom">
					——世界尽头啦——
				</view>
			</view>
			<template v-else>
				<empty content="空荡荡的什么也没有"></empty>
			</template>
		</view>
	</view>
</template>

<script>
	import articleItem from "../article-item/article-item.vue";
	import empty from "@/components/common/empty.vue"
	export default{
		components:{
			articleItem,
			empty
		},
		data(){
			return{
				communityList:[],
				page:{
					pageIndex:1,
					pageSize:10
				},
				loadAll:false,
				loading:false
			}
		},
		watch:{
			"store.state.communityList":{
				deep:true,
				handler:function(newV){
					this.communityList = newV
				}
			}
		},
		methods:{
			// 重新加载数据
			reloadCommunityList(){
				this.page.pageIndex = 1;
				this.page.pageSize = 10;
				this.loadAll = false;
				this.loading = false;
				this.communityList = [];
				this.getCommunityList();
			},
			// 加载更多
			loadMore(){
				if(this.loadAll || this.loading) return;
				this.page.pageIndex +=1;
				this.getCommunityList();
			},
			// 获取社区列表数据
			getCommunityList(){
				if(this.loadAll || this.loading) return;
				let query = {
					pageIndex:this.page.pageIndex,
					pageSize:this.page.pageSize,
					userId : this.$store.state.sender.Id
				}
				this.loading = true;
				this.$Request.post(this.$Config.APIURL + "/api/getCommunityList", query).then(res => {
					if (res?.code == 200) {
						let item  = res?.data || []
						this.communityList.push(...item);
						if(res?.data?.length < this.page.pageSize){
							this.loadAll = true;
							this.$store.commit("setPropName",{propName:'communityList',value:this.communityList});
						}
					} else {
						this.$Common.tipMsg(res?.message);
					}
				}).finally(()=>{
					console.log("////");
					this.loading = false;
				})
			},
			// 点赞
			handleLike(e){
				let query = {
					userId : this.$store.state.sender.Id,
					communityId:e.Id
				}
				if(e.IsLike){
					this.$Request.post(this.$Config.APIURL + "/api/deleteCommunityLikeRecord", query).then(res => {
						if (res?.code == 200) {
							e.IsLike = false;
							if(res?.data != -1){
								e.LikeNum = res?.data;
							}else{
								e.LikeNum --;
							}
							this.$store.commit("setPropName",{propName:'communityList',value:this.communityList});
						} else {
							this.$Common.tipMsg(res?.message);
						}
					});
				}else{
					this.$Request.post(this.$Config.APIURL + "/api/insertCommunityLikeRecord", query).then(res => {
						if (res?.code == 200) {
							e.IsLike = true;
							if(res?.data != -1){
								e.LikeNum = res?.data;
							}else{
								e.LikeNum ++;
							}
							this.$store.commit("setPropName",{propName:'communityList',value:this.communityList});
							
						} else {
							this.$Common.tipMsg(res?.message);
						}
					});
				}
			},
		},
		mounted(){
			this.getCommunityList();
		}
	}
</script>

<style lang="scss" scoped>
	.reach-bottom{
		width: 100%;
		padding: 20rpx;
		color: #ccc;
		font-size: 26rpx;
		text-align: center;
	}
	.hot-list{
		margin-left: 30rpx;
		margin-top: 20rpx;
		swiper{
			height: 270rpx;
		}
		.orange-title{
			display: flex;
			justify-content:space-between ;
			margin-bottom: 20rpx;
			padding-right: 30rpx;
			.al{
				font-size: 36rpx;
				font-weight: 500;
				color: #666666;
				line-height: 25px;
			}
			.ar{
				font-size: 28rpx;
				color: #777;
				position: relative;
				top: 10rpx;
			}
		}
		.orange-content{
			
			.swiper-item{
				height: 140rpx;
				margin-right: 14rpx;
				.img{
					width: 100%;
					height: 100%;
				}
				.bottom-desc{
					background: #EEEEEE;
					border-radius: 0 0 14rpx 14rpx;
					margin-top: -8rpx;
					padding: 10rpx 20rpx;
					
					.subject{
						font-size: 20rpx;
						font-weight: 400;
						color: #666666;
						line-height: 14px;
					}
					.watch{
						font-size: 8px;
						color: #999999;
						line-height: 11px;
					}
				}
			}
		}
		.lookmore{
			background-color: #e2e2e2;
			text-align: center;
			line-height: 140rpx;
		}
		.lookmore .moretext{
			color: #777;
			font-size: 28rpx;
		}
		
	}
</style>
